/**
 * 响应式工具
 * 基于Apple设计规范的断点和设备检测
 */

import { ref, computed, onMounted, onUnmounted } from 'vue'

// Apple设计系统断点
export const breakpoints = {
  xs: 375,    // iPhone SE
  sm: 414,    // iPhone Pro
  md: 768,    // iPad Mini
  lg: 1024,   // iPad
  xl: 1194,   // iPad Pro
  '2xl': 1512, // iPad Pro 12.9"
  '3xl': 1920  // Desktop
}

// 设备类型枚举
export const DeviceType = {
  MOBILE: 'mobile',
  TABLET: 'tablet',
  DESKTOP: 'desktop'
}

// 获取当前窗口尺寸
export const useWindowSize = () => {
  const width = ref(0)
  const height = ref(0)

  const updateSize = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  onMounted(() => {
    updateSize()
    window.addEventListener('resize', updateSize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', updateSize)
  })

  return { width, height }
}

// 响应式断点检测
export const useBreakpoints = () => {
  const { width } = useWindowSize()

  const isXs = computed(() => width.value < breakpoints.sm)
  const isSm = computed(() => width.value >= breakpoints.sm && width.value < breakpoints.md)
  const isMd = computed(() => width.value >= breakpoints.md && width.value < breakpoints.lg)
  const isLg = computed(() => width.value >= breakpoints.lg && width.value < breakpoints.xl)
  const isXl = computed(() => width.value >= breakpoints.xl && width.value < breakpoints['2xl'])
  const is2xl = computed(() => width.value >= breakpoints['2xl'] && width.value < breakpoints['3xl'])
  const is3xl = computed(() => width.value >= breakpoints['3xl'])

  // 移动端检测
  const isMobile = computed(() => width.value < breakpoints.md)
  
  // 平板检测
  const isTablet = computed(() => width.value >= breakpoints.md && width.value < breakpoints.xl)
  
  // 桌面端检测
  const isDesktop = computed(() => width.value >= breakpoints.xl)

  // 当前断点
  const currentBreakpoint = computed(() => {
    if (isXs.value) return 'xs'
    if (isSm.value) return 'sm'
    if (isMd.value) return 'md'
    if (isLg.value) return 'lg'
    if (isXl.value) return 'xl'
    if (is2xl.value) return '2xl'
    return '3xl'
  })

  // 设备类型
  const deviceType = computed(() => {
    if (isMobile.value) return DeviceType.MOBILE
    if (isTablet.value) return DeviceType.TABLET
    return DeviceType.DESKTOP
  })

  return {
    width,
    isXs,
    isSm,
    isMd,
    isLg,
    isXl,
    is2xl,
    is3xl,
    isMobile,
    isTablet,
    isDesktop,
    currentBreakpoint,
    deviceType
  }
}

// 媒体查询工具
export const useMediaQuery = (query) => {
  const matches = ref(false)

  const updateMatches = () => {
    matches.value = window.matchMedia(query).matches
  }

  const mediaQuery = window.matchMedia(query)

  onMounted(() => {
    updateMatches()
    mediaQuery.addEventListener('change', updateMatches)
  })

  onUnmounted(() => {
    mediaQuery.removeEventListener('change', updateMatches)
  })

  return matches
}

// 触摸设备检测
export const useTouchDevice = () => {
  const isTouch = ref(false)

  onMounted(() => {
    isTouch.value = 'ontouchstart' in window || navigator.maxTouchPoints > 0
  })

  return { isTouch }
}

// 设备方向检测
export const useOrientation = () => {
  const orientation = ref('portrait')

  const updateOrientation = () => {
    orientation.value = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape'
  }

  onMounted(() => {
    updateOrientation()
    window.addEventListener('resize', updateOrientation)
    window.addEventListener('orientationchange', updateOrientation)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', updateOrientation)
    window.removeEventListener('orientationchange', updateOrientation)
  })

  const isPortrait = computed(() => orientation.value === 'portrait')
  const isLandscape = computed(() => orientation.value === 'landscape')

  return { orientation, isPortrait, isLandscape }
}

// 响应式布局配置
export const getResponsiveConfig = (deviceType) => {
  const configs = {
    [DeviceType.MOBILE]: {
      sidebarWidth: '280px',
      sidebarCollapsedWidth: '0px',
      headerHeight: '56px',
      padding: '16px',
      fontSize: {
        xs: '12px',
        sm: '14px',
        md: '16px',
        lg: '18px',
        xl: '20px'
      },
      spacing: {
        xs: '4px',
        sm: '8px',
        md: '16px',
        lg: '24px',
        xl: '32px'
      }
    },
    [DeviceType.TABLET]: {
      sidebarWidth: '280px',
      sidebarCollapsedWidth: '64px',
      headerHeight: '64px',
      padding: '24px',
      fontSize: {
        xs: '12px',
        sm: '14px',
        md: '16px',
        lg: '18px',
        xl: '20px'
      },
      spacing: {
        xs: '6px',
        sm: '12px',
        md: '20px',
        lg: '28px',
        xl: '36px'
      }
    },
    [DeviceType.DESKTOP]: {
      sidebarWidth: '280px',
      sidebarCollapsedWidth: '64px',
      headerHeight: '64px',
      padding: '32px',
      fontSize: {
        xs: '12px',
        sm: '14px',
        md: '16px',
        lg: '18px',
        xl: '20px'
      },
      spacing: {
        xs: '8px',
        sm: '16px',
        md: '24px',
        lg: '32px',
        xl: '40px'
      }
    }
  }

  return configs[deviceType] || configs[DeviceType.DESKTOP]
}

// 响应式网格配置
export const getGridConfig = (deviceType) => {
  const configs = {
    [DeviceType.MOBILE]: {
      cols: 1,
      gutter: 16,
      span: 24
    },
    [DeviceType.TABLET]: {
      cols: 2,
      gutter: 20,
      span: 12
    },
    [DeviceType.DESKTOP]: {
      cols: 4,
      gutter: 24,
      span: 6
    }
  }

  return configs[deviceType] || configs[DeviceType.DESKTOP]
}

// 响应式表格配置
export const getTableConfig = (deviceType) => {
  const configs = {
    [DeviceType.MOBILE]: {
      size: 'small',
      bordered: true,
      showHeader: false,
      pagination: {
        size: 'small',
        showSizeChanger: false,
        showQuickJumper: false,
        simple: true
      }
    },
    [DeviceType.TABLET]: {
      size: 'small',
      bordered: true,
      showHeader: true,
      pagination: {
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: false,
        simple: false
      }
    },
    [DeviceType.DESKTOP]: {
      size: 'default',
      bordered: false,
      showHeader: true,
      pagination: {
        size: 'default',
        showSizeChanger: true,
        showQuickJumper: true,
        simple: false
      }
    }
  }

  return configs[deviceType] || configs[DeviceType.DESKTOP]
}

// 响应式表单配置
export const getFormConfig = (deviceType) => {
  const configs = {
    [DeviceType.MOBILE]: {
      labelPosition: 'top',
      size: 'default',
      gutter: 0,
      span: 24
    },
    [DeviceType.TABLET]: {
      labelPosition: 'left',
      size: 'default',
      gutter: 16,
      span: 12
    },
    [DeviceType.DESKTOP]: {
      labelPosition: 'left',
      size: 'default',
      gutter: 24,
      span: 8
    }
  }

  return configs[deviceType] || configs[DeviceType.DESKTOP]
}

// 响应式对话框配置
export const getDialogConfig = (deviceType) => {
  const configs = {
    [DeviceType.MOBILE]: {
      width: '95%',
      fullscreen: true,
      destroyOnClose: true,
      closeOnClickModal: false
    },
    [DeviceType.TABLET]: {
      width: '80%',
      fullscreen: false,
      destroyOnClose: true,
      closeOnClickModal: true
    },
    [DeviceType.DESKTOP]: {
      width: '60%',
      fullscreen: false,
      destroyOnClose: false,
      closeOnClickModal: true
    }
  }

  return configs[deviceType] || configs[DeviceType.DESKTOP]
}

// CSS媒体查询字符串生成器
export const generateMediaQuery = (breakpoint, direction = 'min') => {
  const width = breakpoints[breakpoint]
  if (!width) return ''
  
  return `(${direction}-width: ${width}px)`
}

// 响应式类名生成器
export const generateResponsiveClass = (baseClass, deviceType, modifier = '') => {
  const suffix = modifier ? `-${modifier}` : ''
  return `${baseClass}${suffix}--${deviceType}`
}

export default {
  breakpoints,
  DeviceType,
  useWindowSize,
  useBreakpoints,
  useMediaQuery,
  useTouchDevice,
  useOrientation,
  getResponsiveConfig,
  getGridConfig,
  getTableConfig,
  getFormConfig,
  getDialogConfig,
  generateMediaQuery,
  generateResponsiveClass
}